<template>
	<view class="outside" @click="handlerClick()">
		<view class="status" v-if="showStatus" :style="cssProps">{{statusString}}</view>
		<image :src="img" mode="aspectFill"></image>
		<view class="info">
			<view class="title">{{title}}</view>
			<view class="row">
				<view class="key">活动时间</view>
				<view class="center"></view>
				<view class="value">{{dateString}}</view>
			</view>
			<view class="row">
				<view class="key">活动地点</view>
				<view class="center"></view>
				<view class="value">{{location}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			id: String,
			img: String,
			title: String,
			dateString: String,
			location: String,
			state: Number,
			showStatus: Boolean
		},
		data() {
			return {
				color: this.state == 0 ? "#007AFF" : (this.state == 1 ? "#4CD964" : "#dddddd"),
				statusString: this.state == 0 ? "即将开始" : (this.state == 1 ? "活动中" : "已结束")
			}
		},
		methods: {
			handlerClick() {
				this.$emit('goTo', 'activityInfo', this.id)
			}
		},
		computed: {
			cssProps() {
				return {
					'--background-color': this.color
				}
			}
		}
	}
</script>

<style>
	.outside {
		padding: 15rpx 20rpx;
		height: auto;
		width: calc(100% - 40rpx);
		display: flex;
		position: relative;
	}

	.status {
		position: absolute;
		left: 20rpx;
		top: 15rpx;
		z-index: 10;
		height: 42rpx;
		line-height: 42rpx;
		width: 120rpx;
		color: #fff;
		text-align: center;
		background: var(--background-color);
		font-size: 18rpx;
		border-radius: 5rpx 0 15rpx 0;
	}

	.outside image {
		border-radius: 5rpx;
		height: 180rpx;
		width: 320rpx;
		margin-right: 20rpx;
	}

	.info {
		height: 100%;
		width: auto;
		display: flex;
		flex-direction: column;justify-content: center;
	}

	.title {
		height: auto;
		max-height: 60rpx;
		line-height: 30rpx;
		/* width: 100%; */
		font-size: 30rpx;
		font-weight: bold;
		max-width: 360rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #333;
		margin: 20rpx 0;
	}

	.row {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 5rpx 0;
	}

	.key {
		height: 32rpx;
		font-size: 26rpx;
		line-height: 32rpx;
		color: #666;
	}
	
	.center{
		height: 20rpx;
		width: 1rpx;
		background: #ddd;
		margin: 0 20rpx;
	}

	.value {
		height: 32rpx;
		font-size: 26rpx;
		color: #999;
		line-height: 32rpx;
	}
</style>
